<template>
  <div>
    <div class="top">
      <van-nav-bar title="账号登录"
                   left-text="返回"
                   left-arrow @click-left="onClickLeft"
      />
    </div>
    <div class="img">
      <van-image justify="center" :src="imgurt"/>
    </div>
    <van-divider/>
    <div class="froma">
      <!-- 输入任意文本 -->
      <van-field v-model="text" placeholder="请输入身份证号/手机号"/>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" placeholder="请输入6到18位密码"/>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field
        v-model="sms"
        center
        clearable
        placeholder="请输入动态码"
      >
        <template #button>
          <div @click="resetCode()">
            <registerCode :identifyCode="code" :contentWidth="100" :contentHeight="40"></registerCode>
          </div>
        </template>
      </van-field>
      <van-row type="flex" justify="space-between">
        <van-col span="6" @click="rest">账号注册</van-col>
        <van-col span="6" @click="restfp">忘记密码</van-col>
      </van-row>
    </div>
    <div class="enters">
      <div>
        <van-button type="info" style="width: 345px;" @click="login">确定</van-button>
      </div>
      <p class="agree">点击确定，即表示以阅读并同意<span>《注册会员服务条款》</span></p>
    </div>

  </div>
</template>

<script>
  import registerCode from "@/components/code"
  import imgurt from '../../assets/logest.png'

  export default {
    components: {
      registerCode
    },
    data() {
      return {
        imgurt,
        tel: '',
        text: '',
        digit: '',
        sms: '',
        code: "", // 验证码
      }
    },
    mounted() {
      this.resetCode();
    },
    methods: {
      onClickLeft() {
        this.$router.push({path: '/'})
      },
      rest() {
        this.$router.push({path: 'register'})
      },
      restfp() {
        this.$router.push({path: 'Mobileq'})
      },
      /**
       * 重置验证码
       */
      resetCode() {
        this.code = "";
        const codeList = "zxcvbnmasdfghjklqwertyuiop1234567890";
        for (let i = 0; i < 4; i++) {
          let random = Math.floor((Math.random() * codeList.length) + 0);
          this.code += codeList[random]
        }
      },
      login() {
        this.$router.push({path: 'home'})
      },
    },
  };
</script>

<style scoped>

  .van-image {
    width: 245px;
    height: 70px;
    left: 65px;
    margin-top: 14%;
  }



  .van-col {
    height: 21px;
    left: 37px;
    top: 438px;
    color: rgba(42, 130, 228, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    margin-left: 4%;
  }

  .enters {
    margin-top: 20px;
  }

  .enters div {
    text-align: center;
  }

  .enters p {
    margin-left: 17px;
    height: 18px;
    color: rgba(128, 128, 128, 1);
    font-size: 12px;
    line-height: 150%;
    text-align: left;

  }

  .enters p span {
    height: 18px;
    color: rgba(42, 130, 228, 1);
    font-size: 12px;
    line-height: 150%;
    text-align: left;
  }

  .agree {
    margin-left: 25px !important;
  }
</style>
